<template>

    <div>
        <div>
            <ul class="navigationBar">
                <li><a href="#">背景</a></li>
                <li><a href="#">简介</a></li>
                <li><a href="#">教程 3</a></li>
                <li><a class="lastOne" href="#">关于</a></li>
            </ul>
        </div>

        <div style="margin-top: 50px">
            <ul class="navigationBar2">
                <li><a href="#">背景</a></li>
                <li><a href="#">简介</a></li>
                <li><a href="#">教程 3</a></li>
                <li><a class="lastOne" href="#">关于</a></li>
            </ul>
        </div>

        <div style="margin-top: 50px">
            <ul class="navigationBar3">
                <li><a href="#">背景</a></li>
                <li><a href="#">简介</a></li>
                <li><a href="#">教程 3</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index.vue"
    }
</script>

<style>


    /*---------------------导航1-------------------------------*/
    .navigationBar {
        background-color: black;
        height: 55px;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .navigationBar a:first-child:active{
        background-color: gray;
    }

    .navigationBar  a {
        float: left;
        padding: 16px;
        color: white;
        font-size: 1em;
    }

    .navigationBar  a:not(:first-child) {
        margin-left: 10px;
    }

    .navigationBar .lastOne {
        float: right;
    }
    .navigationBar a:hover{
        background-color: green;
    }

    /*---------------------导航2-------------------------------*/
    .navigationBar2 {
        border: 1px solid #e7e7e7;
        background-color: #f3f3f3;
        height: 55px;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .navigationBar2 a:first-child:active{
        background-color: gray;
    }

    .navigationBar2  a {
        float: left;
        padding: 16px;
        color: black;
        font-size: 1em;
    }

    .navigationBar2  a:not(:first-child) {
        margin-left: 10px;
    }

    .navigationBar2 .lastOne {
        float: right;
    }
    .navigationBar2 a:hover{
        background-color: deepskyblue;
    }

    /*---------------------导航2-------------------------------*/
    .navigationBar3 {
        border: 1px solid #e7e7e7;
        background-color: #f3f3f3;
        height: auto;
        width: 200px;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .navigationBar3 a:first-child:active{
        background-color: gray;
    }

    .navigationBar3  a {
        padding: 10px;
        display: inline-block;
        color: black;
        width: 90%;
        font-size: 1em;
        overflow: hidden;
    }

    .navigationBar3  a:not(:first-child) {
        margin-left: 10px;
    }

    .navigationBar3 a:hover{
        background-color: deepskyblue;
    }





</style>